<template>
  <div class="keyanqingkuang">
    <!-- 课题研究-->
    <daiban id="daiban" name="课题研究"></daiban>
    <el-form ref="ktyjform" :model="ktyjform" label-width="80px">
      <div id="ketibox">
        <div id="keticontent">
          <el-form-item label="项目编号" prop="xmbh">
            <el-input
              v-model="ktyjform.xmbh"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="项目名称" prop="xmmc">
            <el-input
              v-model="ktyjform.xmmc"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="批准部门" prop="pzbm">
            <el-input
              v-model="ktyjform.pzbm"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="项目级别" prop="xmjb">
            <el-select
              clearable
              v-model="ktyjform.xmjb"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in projectlevel"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="研究时间" prop="jssj">
            <el-date-picker
              v-model="ktyjform.jssj"
              align="right"
              type="monthrange"
              placeholder="选择日期"
              unlink-panels
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM"
              clearable
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="经费支持" prop="jfzc">
            <el-input
              v-model="ktyjform.jfzc"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="本人位次" prop="brwc">
            <el-input
              v-model="ktyjform.brwc"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <el-button @click="copeitem('keti')" class="addxueli"
      ><i>＋</i>添加</el-button
    >
    <div class="lastitem">
      <el-button @click="resetForm('ktyjform')">重置</el-button>
      <el-button class="cha" type="primary" @click="onSubmit('ktyjform')"
        >保存</el-button
      >
    </div>
    <!-- 文字类成果-->
    <daiban id="daiban" name="文字类成果"></daiban>
    <el-form ref="wzlcgform" :model="wzlcgform" label-width="80px">
      <div id="wenzibox">
        <div id="wenzicontent">
          <el-form-item label="成果形式" prop="cgxs">
            <el-select
              clearable
              v-model="wzlcgform.cgxs"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in cgtype"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="成果名称" prop="cgmc">
            <el-input
              v-model="wzlcgform.cgmc"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="作者位次" prop="zzwc">
            <el-input
              v-model="wzlcgform.zzwc"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item class="linehight" label="出版社或刊物" prop="cbshkw">
            <el-input
              v-model="wzlcgform.cbshkw"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="出版日期" prop="cbrq">
            <el-date-picker
              v-model="wzlcgform.cbrq"
              align="right"
              type="month"
              value-format="yyyy-MM"
              placeholder="选择日期"
              clearable
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="出版单位" prop="cbdw">
            <el-input
              v-model="wzlcgform.cbdw"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="认证情况" prop="rzqk">
            <el-select
              clearable
              v-model="wzlcgform.rzqk"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in certification"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <el-button @click="copeitem('wenzilei')" class="addxueli"
      ><i>＋</i>添加</el-button
    >
    <div class="lastitem">
      <el-button @click="resetForm('wzlcgform')">重置</el-button>
      <el-button class="cha" type="primary" @click="onSubmit('wzlcgform')"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import $ from "../../assets/jquery.min.js";
import ajax from "../../api/ajax.js";
import daiban from "../../components/title/subTitle.vue";
import qs from "qs";
export default {
  props: { cldgh: { type: String } },
  data() {
    return {
      // 课题研究数据
      ktyjform: {
        brwc: "",
        gh: "",
        jfzc: "",
        jssj: "",
        kssj: "",
        pzbm: "",
        xmbh: "",
        xmjb: "",
        xmmc: "",
      },
      //文字类成果
      wzlcgform: {
        cbdw: "",
        cbrq: "",
        cbshkw: "",
        cgmc: "",
        cgxs: "",
        gh: "",
        rzqk: "",
        zzwc: "",
      },
      //成果形式
      cgtype: [
        {
          value: "论文",
          label: "论文",
        },
        {
          value: "著作",
          label: "著作",
        },
      ],

      //认证情况
      certification: [
        {
          value: "一般",
          label: "一般",
        },
        {
          value: "核心",
          label: "核心",
        },
      ],

      //日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      //   项目级别
      projectlevel: [
        {
          value: "校级",
          label: "校级",
        },
        {
          value: "省级",
          label: "省级",
        },
        {
          value: "国家级",
          label: "国家级",
        },
      ],
    };
  },
  components: {
    daiban,
  },
  methods: {
    //重置
    resetForm(form) {
      this.$refs[form].resetFields();
    },
    //提交
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (formName == "ktyjform") {
            this.ktyjform.kssj = this.ktyjform.jssj[0];
            this.ktyjform.jssj = this.ktyjform.jssj[1];
            this.ktyjform.gh = this.cldgh;
            if (this.ktyjform.gh == "" || undefined) {
              this.$message.error("请先添加老师的基本信息");
            } else {
              const result = await ajax(
                "ktyj",
                qs.stringify(this.ktyjform),
                "post"
              );
              console.log(this.ktyjform, "------------", result);
              alert("这是课题研究");
            }
          }
          if (formName == "wzlcgform") {
            this.wzlcgform.gh = this.cldgh;
            if (this.wzlcgform.gh == "" || undefined) {
              this.$message.error("请先添加老师的基本信息");
            } else {
              const result = await ajax(
                "/wzlcg",
                qs.stringify(this.wzlcgform),
                "post"
              );
              alert("这是文字类成果");
              console.log(this.wzlcgform, "------------", result);
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //添加
    copeitem(type) {
      if (type == "keti") {
        console.log(444);
        const $orig = $("#keticontent:first").clone(true);
        $("#ketibox").append($orig);
      }
      if (type == "wenzilei") {
        const $orig = $("#wenzicontent:first").clone(true);
        $("#wenzibox").append($orig);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.keyanqingkuang {
  width: 100%;
  height: 768px;
  overflow: auto;
}
#keticontent,
#wenzicontent {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 200px;
  padding-top: 22px;
  width: 100%;
  .el-form-item {
    margin-left: 35px;
    width: 415px;
    margin-bottom: 22px;
  }
}
#keticontent:hover,
#wenzicontent:hover {
  background-color: #064cb425;
}
</style>